<template>
  <div class="backtest-container">
    <!-- 回测参数设置 -->
    <div class="config-section">
      <h3>回测参数配置</h3>
      <el-form :model="params" label-width="120px">
        <el-form-item label="策略选择">
          <el-select v-model="params.strategy" placeholder="请选择策略">
            <el-option
              v-for="strategy in strategyOptions"
              :key="strategy.value"
              :label="strategy.label"
              :value="strategy.value"
            />
          </el-select>
        </el-form-item>
        
        <el-form-item label="时间范围">
          <el-date-picker
            v-model="params.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>

        <el-form-item label="初始资金">
          <el-input-number v-model="params.capital" :min="10000" :step="10000" />
        </el-form-item>

        <el-button type="primary" @click="runBacktest">执行回测</el-button>
      </el-form>
    </div>

    <!-- 回测结果展示 -->
    <div class="result-section">
      <h3>回测结果分析</h3>
      <div class="metrics-grid">
        <metric-card title="累计收益" :value="results.total_return" suffix="%"/>
        <metric-card title="年化收益" :value="results.annual_return" suffix="%"/>
        <metric-card title="最大回撤" :value="results.max_drawdown" suffix="%"/>
        <metric-card title="夏普比率" :value="results.sharpe_ratio"/>
      </div>

      <div class="chart-container">
        <echarts :options="chartOptions" auto-resize/>
      </div>
    </div>
  </div>
</template>

<script>
import { runBacktest } from '@/api/backtest'
import Echarts from 'vue-echarts/components/ECharts'
import 'echarts/lib/chart/line'
import MetricCard from '@/components/MetricCard.vue'

export default {
  components: { Echarts, MetricCard },
  data() {
    return {
      params: {
        strategy: 'ma_crossover',
        dateRange: [],
        capital: 100000
      },
      strategyOptions: [
        { label: '双均线策略', value: 'ma_crossover' },
        { label: '动量策略', value: 'momentum' }
      ],
      results: {
        total_return: 0,
        annual_return: 0,
        max_drawdown: 0,
        sharpe_ratio: 0
      },
      chartOptions: {
        xAxis: { type: 'category', data: [] },
        yAxis: { type: 'value' },
        series: [{ type: 'line', data: [] }]
      }
    }
  },
  methods: {
    async runBacktest() {
      try {
        const { data } = await runBacktest({
          ...this.params,
          start_date: this.params.dateRange[0],
          end_date: this.params.dateRange[1]
        })
        
        this.results = data.metrics
        this.updateChart(data.performance)
      } catch (error) {
        this.$message.error('回测执行失败: ' + error.message)
      }
    },
    updateChart(performanceData) {
      this.chartOptions = {
        xAxis: { data: performanceData.dates },
        yAxis: { type: 'value' },
        series: [{
          name: '净值曲线',
          type: 'line',
          data: performanceData.equity_curve
        }]
      }
    }
  }
}
</script>

<style scoped>
.backtest-container {
  padding: 20px;
}

.config-section {
  margin-bottom: 40px;
  padding: 20px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(0,0,0,.1);
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 30px;
}

.chart-container {
  height: 500px;
  background: #fff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(0,0,0,.1);
}
</style>